<div class="main-container" #mainContainer>
    <div *ngIf="company.companyResearched" #otherCompanyContainer class="bg-primary-medium">
        <div class="container">
            <div class="d-flex align-items-center">
                <img class="info-icon mr-4" src="/assets/icons-svg/icon-info-white.svg">
                <p class="pt-3">Sustainalytics covers <span class="bold">{{ company.companyName }}</span> through research on a related entity in our research universe, <span class="bold">{{ company.companyResearched }}</span>.
                        Research for <span class="bold">{{ company.companyResearched }}</span>. is shown below.</p>
            </div>
        </div>
    </div>

    <div class="bg-primary text-white py-4">
        <div class="container">
                <h1 *ngIf="company.companyResearched">{{ company.companyResearched }}</h1>
                <h1 *ngIf="!company.companyResearched">{{ company.companyName }}</h1>
                <p><span class="bold">{{ company.subPeerGroup }}</span>
                <span class="ml-3 bold">{{ company.country }}</span>
                <span class="ml-3 bold">{{ company.tickerAndExchange }}</span>
                <button *ngIf="addPortfolio" class="btn btn-sm white btn-transparent ml-3" (click)="addToPortfolio.show()">Add to Portfolio</button>
            </p>
        </div>
    </div>
</div>

<div class="bg-primary text-white sticky-container" #stickyContainer data-toggle="affix">
    <div class="container">
        <h3 class="mb-0 truncate">{{ company.companyName }}
            <span class="small ml-5">{{ company.subPeerGroup }}</span>
            <span class="small ml-3">{{ company.country }}</span>
            <span class="small ml-3">{{ company.tickerAndExchange }}</span>
        </h3>
    </div>
</div>

<!-- modal templates -->
<app-modal #addToPortfolio [id]="'addToPortfolioModal'" [showCloseButton]=false>
    <div class="app-modal-header">
        Add Company to Portfolio
    </div>
    <div class="app-modal-body">
        <div class="mb-3">
            {{company.companyName}}
        </div>
        <search #addToPortfolioSearch [searchType]="1" [isDropDown]=true [displayField]="'name'"></search>
    </div>
    <div class="app-modal-footer">
        <button class="btn btn-transparent" (click)="cancelAddToPortfolio()">Cancel</button>
        <button [disabled]="addToPortfolioSearch.selected == null" class="btn btn-primary-dark ml-2" (click)="saveAddToPortfolio()">Save</button>
    </div>
</app-modal>